<template>
  <div id="fadw">
    <div class="tit">
      <h2>方案定位</h2>
      <div class="empty-box"></div>
      <p>一诺万金，针对不同业态类型，可提供定制化的智慧物业解决方案</p>
    </div>
    <div class="con">
      <div class="item-box">
        <div
          class="item"
          v-for="item in message"
          :key="item.img"
        >
          <img :src="item.img" alt="">
          <h2>{{ item.mainTit }}</h2>
          <p>{{ item.content }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Fadw",
    data() {
      return {
        message: [
          {
            img: "https://www.1nuoyun.com/uploadfile/2021/09/23/20210923094001hkG5jt.png",
            mainTit: "住宅物业",
            content: "满足中高端住宅小区、公寓、保障房等住宅型物业全部管理需求。"
          },
          {
            img: "https://www.1nuoyun.com/uploadfile/2021/09/23/202109230940014H3vOi.png",
            mainTit: "商业物业",
            content: "满足写字楼、商务中心、办公大厦等商业性物业全部管理需求。"
          },
          {
            img: "https://www.1nuoyun.com/uploadfile/2021/09/23/20210923094001q7evlV.png",
            mainTit: "园区物业",
            content: "满足科技园区、物流园区、农贸市场、建材市场等园区类物业核心需求。"
          },
          {
            img: "https://www.1nuoyun.com/uploadfile/2021/09/23/20210923094001vJNCuL.png",
            mainTit: "后勤物业",
            content: "满足办公楼、医院、学校、厂房等后勤类型物业的核心需求。"
          },
          {
            img: "https://www.1nuoyun.com/uploadfile/2021/09/23/20210923094001RQsPHz.png",
            mainTit: "集团化物业",
            content: "满足跨区域的物业集团、城市综合体、泛园区等多业态组合的集团化管控需求。"
          },
        ]
      }
    }
  }
</script>

<style lang="scss" scoped>

  @import "assets/scss/public";

  #fadw {
    width: 62.5%;
    margin: 4rem auto;
    .tit {
      .empty-box {
        background: linear-gradient(90deg, #2f6bee, #009fff);
      }
    }
    .con {
      padding: 4rem;
      box-shadow: 0 0 1rem #f5f5f5;
      .item-box {
        display: flex;
        justify-content: space-between;
        text-align: center;
        .item {
          flex: 1;
          padding: 6rem 3.2rem;
          h2 {
            font-size: 2.4rem;
            font-weight: 1000;
            color: #1890ff;
            margin: 2.4rem 0;
          }
          p {
            font-size: 1.6rem;
            color: #666;
            text-align: justify;
          }
        }
        .item:hover {
          background-color: #f5f5f5;
        }
      }
    }
  }

</style>